/* claro/form/Common.css */

/*========================= common css =========================*/

/* 'dijitTextBox' refers to 'dijit(TextBox|DateTextBox|CurrencyTextBox|...)' */

.steel .dijitTextBoxError .dijitValidationContainer {
	background-color: #d46363;
	background-image: url('images/error.png');
	background-position: top center;
	border: solid #d46464 0px;
	border-left-width: 1px;
	width: 9px;
}
.steel .dijitTextBoxError .dijitValidationIcon {
	width: 0px;
	background-color: transparent !important; /* so the INPUT doesn't obscure the border in rtl+a11y */
}

/* .dijitInputField .dijitPlaceHolder is explicitly listed below because
   dijitPlaceHolder is absolutely positioned, so padding set on dijitInputField
   won't affect it */
.steel .dijitTextBox .dijitInputContainer,
.steel .dijitTextArea,
.steel .dijitInputField .dijitPlaceHolder {
	padding: 2px;
}
/*harjeets*/
.steel .dijitTextBox,
.steel .dijitTextBox .dijitButtonNode {
	/* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */
	xxxborder-color: #b5bcc7;
	border-color: #D3D3D3;
	-webkit-transition-property:background-color, border;
 	-webkit-transition-duration:.35s;
}
.steel .dijitTextBox {
	xxxbackground-color: #f7fcff;
	background-color: #FAFAFB;
}

/* harjeet hover */
.steel .dijitTextBoxHover,
.steel .dijitTextBoxHover .dijitButtonNode {
	xxxborder-color: #769dc0;
	border-color: #ED8714;
 	-webkit-transition-duration:.25s;
}
.steel .dijitTextBoxHover {
	xxxbackground-color: #e9f4fe;
	xxxbackground-image: url('images/textBox_back.png');
	xxxbackground-repeat: repeat-x;
}

/* error state */
.steel .dijitTextBoxError,
.steel .dijitTextBoxError .dijitButtonNode {
	border-color: #d46464;
}
.steel .dijitTextBoxError,
.steel .dijitTextBoxError .dijitInputContainer {
	background-color: #fdf7f7;
}

/* harjeet focused state */
.steel .dijitTextBoxFocused,
.steel .dijitTextBoxFocused .dijitButtonNode {
	xxxborder-color:#769dc0;
	border-color:#d3d3d3;
 	-webkit-transition-duration:.1s;
}
.steel .dijitTextBoxFocused {
	background-color: #fff;
	background-image: url('images/textBox_back.png');
	background-repeat: repeat-x;
}
.steel .dijitTextBoxFocused .dijitInputContainer {
	background: #fff;
}

.steel .dijitTextBoxErrorFocused,
.steel .dijitTextBoxErrorFocused .dijitButtonNode {
	border-color: #ce4f4f;
}

/* disabled state */
.steel .dijitTextBoxDisabled,
.steel .dijitTextBoxDisabled .dijitButtonNode {
	border-color: #d3d3d3;
}
.steel .dijitTextBoxDisabled {
	background-color: #efefef;
	background-image: none;
	color: #818181;
}

/*========================= for special widgets =========================*/

/* ComboBox */
/*harjeet*/
.steel .dijitComboBox .dijitArrowButtonInner {
	background-image: url("images/commonFormArrows.png");
	background-position:-35px 53%;
	background-repeat: no-repeat;
	margin: 0px;
	width:16px;
	height:100%;
	xxxborder: 1px solid #fff;
	border: 1px solid transparent;
}

.steel .dijitTextBox .dijitInputField {
	padding-top: 1px; /* 1px and not 2px due to 1px padding on the INPUT */
	padding-bottom: 1px;
}
.steel .dijitTextBox .dijitInputInner {
	/* left padding helps line up input text with menu text */
	padding: 1px 2px 1px 0; /* match 1px vertical border on button */
}
/*harjeet*/
.steel .dijitTextBox.dijitTextBoxDisabled .dijitInputInner {
    text-decoration: line-through;
}
.steel .dijitSelect.dijitSelectDisabled .dijitButtonText {
	text-decoration: none;
}
.steel .dijitSelect.dijitSelectDisabled .dijitButtonText .dijitSelectLabel{
	text-decoration: line-through;
}

.steel .dijitTextBox .dijitValidationContainer {
	padding: 0 0 2px 0; /* match 1px border height in button */
}

.steel .dijitComboBox .dijitButtonNode {
	background-color: #ebeef4;
	background-image: url("images/formHighlight.png");
	background-repeat:repeat-x;
}

/* harjeet hover state */
.steel .dijitComboBoxHover .dijitButtonNode {
	xxxbackground-color:#abd6ff;
	background-color:#d3d3d3;
}
.steel .dijitComboBoxHover .dijitArrowButtonInner {
	background-position:-70px 53%;
}

/* focused state */
.steel .dijitComboBoxFocused .dijitButtonNode {
	xxxbackground-color:#7dbefa;
	background-color:#d3d3d3;
	background-position:0px -177px;
	padding: 1px;
}	
.steel .dijitComboBoxFocused .dijitArrowButtonInner {
	background-position:-70px 53%;
	border: 0px none;
}

/* disabled state */
.steel div.dijitComboBoxDisabled .dijitArrowButtonInner {
	/* specific selector set to override background-position setting from Button.js
	 * (.steel .dijitComboBoxDisabled .dijitArrowButtonInner) */
	background-position:0px 50%;
	background-color:#f1f1f1;
}

/*========================= hacks for browsers =========================*/
/* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calcuate error */
.dj_ff3 .steel .dijitInputField input[type="hidden"] {
	display: none;
	height: 0;
	width: 0;
}

/* ie6 doesn't support transparent background img */
.dj_ie6 .steel .dijitTextBox,
.dj_ie6 .steel .dijitComboBox .dijitButtonNode {
	background-image: none;
}


/* In quirks mode strangely all browsers do border-box sizing for input nodes.
 * Drop the 1px white border around ComboBox arrow to fix misalignment of icon, and to jump on focus.
 * Note also that these rules are copying what is done on focus.
 */
.dj_quirks .steel .dijitComboBox .dijitArrowButtonInner {
	border: 0px;
}
.dj_quirks .steel .dijitComboBox .dijitArrowButtonContainer {
	padding: 1px;
}
